const path = require('path');
// 导入eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 打包html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 单独分离css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// css压缩
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
// js 压缩
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
    mode: 'production',
    devtool: 'source-map',
    entry: ['./src/main.js', './public/index.html'],
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'static/js/[name][contenthash:10].js',
        publicPath: '/',               // 配置静态资源根目录
        clean: true // 每次打包清空dist 文件夹重新生成
    },
    //module
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 不进行处理的文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                                    corejs: { version: 2 } // 指定core-js的版本号为2
                                }
                            ]
                        ]
                    }
                }
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                type: 'asset',
                generator: {
                    filename: 'static/images/[name][hash:8][ext][query]'
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 12 * 1024 // 4kb
                    }
                }
            },
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            {
                test: /\.(ttf|woff2?)/,
                type: 'asset/resource',
                generator: {
                    filename: 'static/font/[name][hash:8][ext][query]'
                }
            }
        ]
    },
    plugins: [
        // js 语法检查
        new ESLintPlugin({
            context: path.resolve(__dirname, '../src')
        }),
        // 打包html
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.html'),
            filename: 'index.html',
            inject: 'body', // head
            hash: true,
            // minify: {
            //     removeAttributeQuotes: true,// 移除属性中的双引号
            //     removeComments: true,// 移除注释
            //     collapseWhitespace: true,// 去除空格与换行
            // }
        }),
        new MiniCssExtractPlugin({
            filename: "static/css/[hash:8].css"
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
    }
}